<template>
  <div id="homewrap">
    <div class="language">
      <a href="javascript:;" @click="changeLanguage('zh')" :class="[language == 'en' ? '' : 'selected']">中文</a>
      <a href="javascript:;" @click="changeLanguage('en')" :class="['en', language == 'en' ? 'selected' : '']">English</a>
    </div>
    <div id="wrap">
      <div class="wrap-item wrap-item1">
        <ul>
          <li @click="clickleft('天津外商投资指引')">
            <p v-show="language == 'zh'">天津外商投资指引</p>
            <p class="en" v-show="language == 'en'">TIANJIN FOREIGN INVESTMENT GUIDANCE</p>
          </li>
          <li @click="clickleft('天津投资环境介绍')">
            <p v-show="language == 'zh'">天津投资环境介绍</p>
            <p class="en" v-show="language == 'en'">INTRODUCTION TO TIANJIN INVESTMENT ENVIRONMENT</p>
          </li>
          <li @click="clickleft('天津市外商投资企业政策要点汇编')">
            <p v-show="language == 'zh'">天津市外商投资企业政策要点汇编</p>
            <p class="en" style="/*font-size: 0.6rem;*/" v-show="language == 'en'">COMPILATION OF KEY POINTS OF POLICIES
              FOR
              FOREIGN-INVESTED ENTERPRISES
              IN TIANJIN</p>
          </li>
          <li @click="clickleft('天津市制造业发展介绍')">
            <p v-show="language == 'zh'">天津市制造业发展介绍</p>
            <p class="en" v-show="language == 'en'">INTRODUCTION TO THE DEVELOPMENT OF MANUFACTURING INDUSTRY</p>
          </li>
          <li @click="clickleft('天津市重点对外招商项目')" v-show="language == 'zh'">
            <p v-show="language == 'zh'">天津市重点对外招商项目</p>
            <p class="en" v-show="language == 'en'">TIANJIN KEY FOREIGN INVESTMENT PROJECTS</p>
          </li>
          <li @click="clickleft('各行政区介绍')">
            <p v-show="language == 'zh'">各行政区介绍</p>
            <p class="en" v-show="language == 'en'">DISTRICTS INTRODUCTION</p>
          </li>
        </ul>
      </div>
      <div class="wrap-item2">
        <div id="myChartCenter" ref="myChartCenter" style="width: 100%; height: calc(100vh - 4rem)"></div>
      </div>
    </div>
  </div>
</template>
  
<script>
import * as echarts from "echarts";
import tj from "@/json/tj.json";
import tjcenter from "@/json/tjcenter.json";
import entj from "@/json/entj.json";
import entjcenter from "@/json/entjcenter.json";
const { shell } = require("electron");
import path from 'path';

export default {
  name: "HomeView",
  data() {
    return {
      tj: tj,
      tjcenter: tjcenter,
      language: 'zh',
      mapFontSize: '1rem',
      mapFont: 'font',
      leftArray: {
        'zh': [
          '天津外商投资指引',
          '天津投资环境介绍',
          '天津市外商投资企业政策要点汇编',
          '天津市制造业发展介绍',
          '天津市重点对外招商项目',
          '各行政区介绍'
        ],
        'en': [
          'Tianjin Foreign Investment Guidance',
          'Introduction to Tianjin Investment Environment',
          'Compilation of Key Points of Policies for Foreign-Invested Enterprises in Tianjin',
          'Introduction to the Development of Manufacturing  Industry  in Tianjin',
          'Districts Introduction'
        ],
      },
      leftMap: {
        '天津外商投资指引': 'Tianjin Foreign Investment Guidance',
        '天津投资环境介绍': 'Introduction to Tianjin Investment Environment',
        '天津市外商投资企业政策要点汇编': 'Compilation of Key Points of Policies for Foreign-Invested Enterprises in Tianjin',
        '天津市制造业发展介绍': 'Introduction to the Development of Manufacturing Industry in Tianjin',
        '天津市重点对外招商项目': '天津市重点对外招商项目',
        '各行政区介绍': 'Districts Introduction',
      },
      areaMap: {
        'DONGLI': '东丽区',
        'XIQING': '西青区',
        'JINNAN': '津南区',
        'BEICHEN': '北辰区',
        'WUQING': '武清区',
        'BAODI': '宝坻区',
        'BINHAI': '滨海新区',
        'NINGHE': '宁河区',
        'JINGHAI': '静海区',
        'JIZHOU': '蓟州区',
        'HEPING': '和平区',
        'HEDONG': '河东区',
        'HEXI': '河西区',
        'NANKAI': '南开区',
        'HEBEI': '河北区',
        'HONGQIAO': '红桥区'
      }
    };
  },
  created() {
    this.$nextTick(() => {
      let lang = this.$route.query.lang;
      if (lang) {
        this.$data.language = lang;
      }

      // 注册天津地图
      if (lang == 'en') {
        this.$data.mapFontSize = '0.7rem'
        this.$data.mapFont = '微软雅黑'
        echarts.registerMap("tj", entj);
        echarts.registerMap("tjcenter", entjcenter);
      }
      else {
        this.$data.mapFontSize = '1rem'
        this.$data.mapFont = 'font'
        echarts.registerMap("tj", tj);
        echarts.registerMap("tjcenter", tjcenter);
      }
      
      // 初始化
      let myChartCenter = echarts.init(this.$refs.myChartCenter);
      this.initChartsCenter(myChartCenter);

      let that = this;
      
      window.addEventListener("resize", function () {
        myChartCenter.resize();
      });

      myChartCenter.on("click", function (data) {
        let name = data.name;
        if (name == "") {
          return false;
        }

        // myChartCenter.dispatchAction({
        //   type: 'mapUnSelect',
        //   seriesId: 'mapcenter',
        //   seriesName: 'mapcenter',//这行不能省
        // });

        // myChartCenter.dispatchAction({
        //   type: 'mapUnSelect',
        //   seriesId: 'mapright',
        //   seriesName: 'mapright',//这行不能省
        // });

        let areaPath = '各行政区介绍';
        if (that.language == 'en' && ['JIZHOU', 'BAODI', 'JINNAN', 'JINGHAI', 'HONGQIAO', 'HEBEI', 'HEPING'].indexOf(name) > -1) {
          alert('none');
          return false;
        }

        if (that.language == 'en') {
          // name = that.areaMap[name];
          areaPath = 'Districts Introduction';
        }

        // console.log(process.cwd());
        // let pathstr = process.cwd();
        let pathstr = path.resolve('./electron/');
        pathstr += '\\' + areaPath + '\\' + name;
        // path = 'D:\\Administrator\\Desktop\\';
        console.log(pathstr);
        // shell.showItemInFolder(path);
        shell.openPath(pathstr);
      });

      this.chartline(myChartCenter);
    });
  },
  mounted() { },
  methods: {
    initChartsCenter(myChartCenter) {
      this.myChartCenter = myChartCenter;
      // option配置
      let option = {
        backgroundColor: "transparent",
        title: {
          text: "",
          // subtext: '',
          // sublink: '',
          left: "center",
          color: "#000",
        },
        tooltip: {
          trigger: "none",
        },
        grid: {},
        xAxis: {
          type: "value",
          show: false,
          min: 0,
          max: 100,
          position: "top",
        },
        yAxis: {
          type: "value",
          show: false,
          min: 0,
          max: 100,
          inverse: true,
        },
        series: [
          {
            id: "mapcenter",
            name: "mapcenter",
            type: "map",
            map: "tj",
            geoIndx: 0,
            aspectScale: 0.75,
            zoom: 1,
            layoutCenter: ["28%", "45%"],
            // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
            layoutSize: '70%',
            showLegendSymbol: false,
            label: {
              show: true,
              color: "hsl(186.82deg 100% 91.37%)",
              fontWeight: "bold",
              fontFamily: this.mapFont,
              fontSize: this.mapFontSize
            },
            itemStyle: {
              // 地图交界线颜色
              borderColor: "hsl(183.29deg 100% 50%)",
              shadowColor: "hsl(183.29deg 100% 50%)",
              // 交界线宽
              borderWidth: 2,
              areaColor: "hsl(217.06deg 77.27% 34.51%)",
              fontWeight: "bold"
            },
            emphasis: {
              // 阴影
              shadowBlur: 20,
              shadowOffsetX: 0,
              hoverAnimation: true,
              // 地图区域的高亮颜色
              areaColor: "hsl(217.06deg 77.27% 44.51%)",
              // 地图交界线颜色
              borderColor: "hsl(183.29deg 100% 50%)",
              // 交界线宽
              borderWidth: 2,
              fontWeight: "bold",
              fontFamily: this.mapFont,
              fontSize: this.mapFontSize,
              label: {
                show: true,
                color: "hsl(186.82deg 100% 91.37%)",
                fontWeight: "bold",
                fontFamily: this.mapFont,
              },
              itemStyle: {
                // 阴影
                shadowBlur: 20,
                shadowOffsetX: 0,
                hoverAnimation: true,
                // 地图区域的高亮颜色
                areaColor: "hsl(217.06deg 77.27% 44.51%)",
                // 地图交界线颜色
                borderColor: "hsl(183.29deg 100% 50%)",
                // 交界线宽
                borderWidth: 2,
                fontWeight: "bold",
                fontFamily: this.mapFont,
                fontSize: this.mapFontSize
              },
            },
            selectedMode: "single", //选择模式，单选，只能选中一个地市
            select: {
              //这个就是鼠标点击后，地图想要展示的配置
              disabled: false, //可以被选中
              // itemStyle: {
              //   //相关配置项很多，可以参考echarts官网
              //   areaColor: "hsl(217.06deg 77.27% 44.51%)",
              //   // 阴影
              //   shadowBlur: 20,
              //   shadowOffsetX: 0,
              //   hoverAnimation: true,
              // },
              // label: {
              //   show: true,
              //   color: "hsl(186.82deg 100% 91.37%)",
              //   fontWeight: "bold",
              //   fontFamily: this.mapFont,
              // },
              label: {
                show: true,
                color: "hsl(186.82deg 100% 91.37%)",
                fontWeight: "bold",
                fontFamily: this.mapFont,
                fontSize: this.mapFontSize,
              },
              itemStyle: {
                // 地图交界线颜色
                borderColor: "hsl(183.29deg 100% 50%)",
                // 交界线宽
                borderWidth: 2,
                areaColor: "hsl(217.06deg 77.27% 34.51%)",
                shadowColor: "hsl(183.29deg 100% 50%)",
                fontWeight: "bold",
                fontFamily: this.mapFont,
                fontSize: this.mapFontSize,
              },
            },
            roam: false,
            animation: false,
          },
          {
            id: "mapright",
            name: "mapright",
            type: "map",
            map: "tjcenter",
            geoIndx: 1,
            aspectScale: 0.75,
            zoom: 1,
            layoutCenter: ["72%", "50%"],
            // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
            layoutSize: '40%',
            showLegendSymbol: false,
            label: {
              show: true,
              color: "hsl(186.82deg 100% 91.37%)",
              fontWeight: "bold",
              fontFamily: this.mapFont,
              fontSize: this.mapFontSize,
            },
            itemStyle: {
              // 地图交界线颜色
              borderColor: "hsl(183.29deg 100% 50%)",
              // 交界线宽
              borderWidth: 2,
              areaColor: "hsl(217.06deg 77.27% 34.51%)",
              shadowColor: "hsl(183.29deg 100% 50%)",
              fontWeight: "bold",
              fontFamily: this.mapFont,
              fontSize: this.mapFontSize,
            },
            emphasis: {
              itemStyle: {
                // 阴影
                shadowBlur: 20,
                shadowOffsetX: 0,
                hoverAnimation: true,
                // shadowColor: 'rgba(0, 0, 0, 0.5)',
                // 普通图表的高亮颜色
                // color: "rgba(0, 0, 0, 0.5)",
                // barBorderWidth: 1,
                // 地图区域的高亮颜色
                areaColor: "hsl(217.06deg 77.27% 44.51%)",
                // 地图交界线颜色
                borderColor: "hsl(183.29deg 100% 50%)",
                // 交界线宽
                borderWidth: 2,
                fontWeight: "bold",
                fontFamily: this.mapFont,
                fontSize: this.mapFontSize
              },
              label: {
                show: true,
                color: "hsl(186.82deg 100% 91.37%)",
                fontWeight: "bold",
                fontFamily: this.mapFont,
                fontSize: this.mapFontSize
              },
            },
            selectedMode: "single", //选择模式，单选，只能选中一个地市
            select: {
              //这个就是鼠标点击后，地图想要展示的配置
              disabled: false, //可以被选中
              // itemStyle: {
              //   //相关配置项很多，可以参考echarts官网
              //   areaColor: "hsl(217.06deg 77.27% 44.51%)",
              //   // 阴影
              //   shadowBlur: 20,
              //   shadowOffsetX: 0,
              //   hoverAnimation: true,
              // },
              // label: {
              //   show: true,
              //   color: "hsl(186.82deg 100% 91.37%)",
              //   fontWeight: "bold",
              //   fontFamily: this.mapFont,
              // },
              label: {
                show: true,
                color: "hsl(186.82deg 100% 91.37%)",
                fontWeight: "bold",
                fontFamily: this.mapFont,
                fontSize: this.mapFontSize,
              },
              itemStyle: {
                // 地图交界线颜色
                borderColor: "hsl(183.29deg 100% 50%)",
                // 交界线宽
                borderWidth: 2,
                areaColor: "hsl(217.06deg 77.27% 34.51%)",
                shadowColor: "hsl(183.29deg 100% 50%)",
                fontWeight: "bold",
                fontFamily: this.mapFont,
                fontSize: this.mapFontSize,
              },
            },
            roam: false,
            animation: false,
          },
        ],
      };

      myChartCenter.setOption(option);
    },
    changeLanguage(txt) {
      this.language = txt
      if (txt == 'zh') {
        this.mapFontSize = '1rem'
        this.mapFont = 'font'
        echarts.registerMap("tj", tj);
        echarts.registerMap("tjcenter", tjcenter);
      }
      else {
        this.mapFontSize = '0.7rem'
        this.mapFont = '微软雅黑'
        echarts.registerMap("tj", entj);
        echarts.registerMap("tjcenter", entjcenter);
      }
      // 初始化
      // let myChartCenter = echarts.init(this.$refs.myChartCenter);
      let myChartCenter = echarts.getInstanceByDom(this.$refs.myChartCenter);
      if (myChartCenter == undefined) {
        myChartCenter = echarts.init(this.$refs.myChartCenter);
      }

      this.initChartsCenter(myChartCenter);
    },
    clickleft(txt) {
      // console.log(process.cwd());
      // let pathstr = process.cwd();
      if (this.language == 'en') {
        txt = this.leftMap[txt];
      }
      let pathstr = path.resolve('./electron/');
      pathstr += '\\' + txt;
      // path = 'D:\\Administrator\\Desktop\\';
      console.log(pathstr);
      // shell.showItemInFolder(path);
      shell.openPath(pathstr);
    },
    chartline(myChartCenter) {
      // const seriesModel1 = myChartCenter.getModel().getSeriesByIndex(0);
      // const coordSys1 = seriesModel1.coordinateSystem;
      // const point1 = coordSys1.dataToPoint([117.313967, 39.087764]);
      // const seriesModel2 = myChartCenter.getModel().getSeriesByIndex(1);
      // const coordSys2 = seriesModel2.coordinateSystem;
      // const point2 = coordSys2.dataToPoint([117.164143, 39.120474]);

      var data = [
        [
          [117.164143, 39.120474],
          [117.164143, 39.120474],
        ],
      ];

      //从两个地图的的地理坐标 转换为飞线数据
      var convertData = function () {
        var res = [];
        for (let index in data) {
          data[index][0];

          var from = myChartCenter.convertToPixel(
            {
              seriesId: "mapcenter",
            },
            data[index][0]
          ); // 使用第一个 geo 坐标系进行转换
          from = myChartCenter.convertFromPixel("grid", from);
          var to = myChartCenter.convertToPixel(
            { seriesId: "mapright" },
            data[index][1]
          );
          to = myChartCenter.convertFromPixel("grid", to);
          res.push({
            coords: [from, to],
          });
        }

        return res;
      };

      setTimeout(function () {
        myChartCenter.setOption({
          series: [
            {
              id: "feixian",
              type: "lines",
              coordinateSystem: "cartesian2d",
              xAxisIndex: 0,
              yAxisIndex: 0,
              data: convertData(),
              symbol: ["none", "arrow"], // 箭头图标
              // effect: {
              //   show: true,
              //   period: 4, //箭头指向速度，值越小速度越快
              //   trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重
              //   symbol: "arrow", // 箭头图标
              //   // color: "#00FFFF",
              //   symbolSize: 8, // 图标大小
              // },
              animation: false,
              // 飞线样式
              lineStyle: {
                width: 1.2,
                opacity: 1,
                curveness: -0.5, // 线条曲直度
                color: "hsl(183.29deg 100% 50%)",
                type: 'dashed'
              },
            },
          ],
        });
      }, 10);
    },
  },
};
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#homewrap {
  background: url("~@/assets/img/back.png") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: calc(100vh - 4rem);
  /* background: url("@/static/img/back.png") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; */
}

.language {
  height: 3rem;
  line-height: 3rem;
  color: white;
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
  padding-right: 1rem;
}

.language a {
  text-decoration: none;
  color: white;
  font-size: 1rem;
  flex-direction: row-reverse;
  display: block;
  width: 10rem;
  border-radius: 20px;
  border-style: solid;
  border-color: white;
  text-align: center;
  height: 2.5rem;
  line-height: 2.5rem;
  background: #ef9528;
  box-shadow: 1px 1px 1rem #ef9528;
  margin-left: 1rem;
}

.language a.selected {
  background: #ef7428;
  box-shadow: 1px 1px 1rem #ef7428;
}

.language a.en {
  margin-left: 1rem;
}

.wrap-item {
  flex: 1;
}

.wrap-item2 {
  flex: 2;
}

.wrap-item1 {
  justify-content: center;
  /* align-items: center; */
}

.wrap-item1 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wrap-item1 li {
  text-align: center;
  color: hsl(186.82deg 100% 91.37%);
  width: 17.5rem;
  margin: 0 auto;
  height: 3.5rem;
  display: flex;
  flex-direction: column;
  align-self: center;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-top: 2rem;
  /* margin-right: 2rem; */
  /*背景图片*/
  background: url(~@/assets/img/a1.png) no-repeat center top/100% 30px,
    url(~@/assets/img/a3.png) no-repeat center 30px/100% calc(100% - 30px - 27px),
    url(~@/assets/img/a2.png) no-repeat center bottom/100% 27px;
  box-shadow: 0.4rem 0.4rem 1rem hsl(183.29deg 100% 50%);
}

@font-face {
  font-family: 'font';
  src: url('~@/assets/fonts/font.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AlimamaShuHeiTi';
  src: url('~@/assets/fonts/AlimamaShuHeiTi-Bold.otf');
  font-weight: normal;
  font-style: normal;
}

.wrap-item1 li:hover {
  /* background: red; */
  /* opacity: 0.8; */
  background: url(~@/assets/img/ha1.png) no-repeat center top/100% 30px,
    url(~@/assets/img/ha3.png) no-repeat center 30px/100% calc(100% - 30px - 27px),
    url(~@/assets/img/ha2.png) no-repeat center bottom/100% 27px;
}

.wrap-item1 li:hover p {
  color: #ff9313
}

.wrap-item1 li p {
  text-align: center;
  color: hsl(186.82deg 100% 91.37%);
  /* font-weight: bold; */
  font-family: 'AlimamaShuHeiTi';
  font-size: 1.5rem;
  margin: 0;
}

.wrap-item1 li p.en {
  font-family: '微软雅黑';
  font-size: 0.9rem;
}
</style>
  